<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h3 @click="chang_num">{{num}}</h3>
    <h4>十位：{{parseInt(num / 10)}}</h4>
    <h4>个位：{{num % 10}}</h4>

    十位：<input type="number" v-model="shi" max="9" min="0"> <br>
    个位：<input type="number" v-model="ge" max="9" min="0"> <br>
    结果：<span>{{shi *10 + + ge}}</span> <br>
    结果：<span>{{result}}</span>

    <h3 @click="chang_num">{{num}}</h3>
    <h4>十位：{{num1}}</h4>
    <h4>个位：{{num2}}</h4>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            num: 66,
            shi: '',
            ge: '',
            num1: '',
            num2: '',
        },
        methods: {
            chang_num() {
                this.num--
            }
        },
        computed: {
            result() {
                return this.shi * 10 + + this.ge
            },
        },
        watch: {
            num() {
                this.num1 = parseInt(this.num / 10)
                this.num2 = this.num % 10
            },
        },
    })
</script>
</body>
</html>